<template>
  <el-dialog
    :close-on-click-modal="false"
    width="75%"
    title="新增考核标准"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form
      status-icon
      :rules="rules"
      :model="datas"
      ref="editForm"
    >
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item
            prop="name"
            label="考核标准"
            :label-width="baseStyle.width"
          >
            <!-- <el-input
              type="textarea"
              :autosize="{ minRows: 2 }"
              v-model="datas.name"
              autocomplete="off"
            ></el-input> -->
            <quill-editor
              class="editor-quill"
              v-model="datas.name"
              :options="editorOption"
              ref="myQuillEditor"
            >
            </quill-editor>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="orgname"
            label="所属部门"
            :label-width="baseStyle.width"
          >
            <SearchParts :orgname="datas.orgname" @chosePart="chosepart" />
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item prop="score" label="总分" :label-width="baseStyle.width">
            <el-input-number
              v-model="datas.score"
              :precision="1"
              :step="0.1"
              :min="0"
              :max="100"
              style="width:100%"
            ></el-input-number>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item prop="type" label="类型" :label-width="baseStyle.width">
            <el-select
              v-model="datas.type"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option label="无" :value="0"></el-option>
              <el-option label="考核项目经理" :value="1"></el-option>
              <el-option label="考核项目成员" :value="2"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="weight"
            label="权重"
            :label-width="baseStyle.width"
          >
            <el-input-number
              v-model="datas.weight"
              :precision="0"
              :step="1"
              :min="0"
              :max="100"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="sort" label="排序" :label-width="baseStyle.width">
            <el-input-number
              v-model="datas.sort"
              :precision="0"
              :step="1"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            prop="status"
            label="是否禁用"
            :label-width="baseStyle.width"
          >
            <el-radio-group v-model="datas.status">
              <el-radio :label="1">启用</el-radio>
              <el-radio :label="2">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";
import SearchParts from "@light-app/views/searchParts";

export default {
  name: "addEdit",
  props: {
    visible: Boolean,
    baseStyle: Object,
    datas: {
      type: Object,
    },
    saveForm: Function,
  },
  data() {
    const rules = this.getRules();
    return {
      loading: false,
      rules,

      choseDepart: { id: "", lebel: "" },
      editorOption: {
        placeholder: "请输入...",
        modules: {
          toolbar: {
            container: [
              ["bold", "italic"], // 加粗 斜体 下划线 删除线
            ],
          },
        },
        theme: "snow",
      },
    };
  },
  components: {
    SearchParts,
  },
  created() {},
  methods: {
    //所属部门选择
    chosepart(val) {
      this.datas.orgname = val.label;
      this.choseDepart = { ...val };
      // console.log("val：", val);
    },

    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
    },
    close() {
      this.cancel();
    },
    save() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$emit("saveForm", {
            data: { ...this.datas },
            choseDepart: this.choseDepart,
          });
        } else {
          return false;
        }
      });
    },
    getRules() {
      return {
        name: [
          {
            validator: (rule, value, callback) => {
              if (!this.datas.name) {
                callback(new Error(`请填写考核点`));
                return;
              }
              if (this.datas.name.trim().length < 1) {
                callback(new Error(`请填写考核点`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
        // score: [
        //   {
        //     validator: (rule, value, callback) => {
        //       if (this.datas.score === 0) {
        //         callback();
        //       }
        //       if (!this.datas.score) {
        //         callback(new Error(`请填写总分（最小值为0，最大值为100）`));
        //         return;
        //       }
        //       callback();
        //     },
        //     trigger: "blur",
        //   },
        // ],
        weight: [
          {
            validator: (rule, value, callback) => {
              if (this.datas.weight < 0) {
                callback(new Error(`请填写权重（最小值为0）`));
                return;
              }
              callback();
            },
            trigger: "blur",
          },
        ],
      };
    },
  },
};
</script>
<style lang="scss" scoped>
</style>